<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>超图车辆移动</title>
    <link href="../../css/global.css" rel="stylesheet" />
    <style type="text/css">
        #map {
            width: 100%;
            height: 100%;
        }
        #car {
            width: 20px;
            height: 20px;
            background: url("../../img/货车.png");
            background-size: cover;
            position: absolute;
            left: 463px;
            top: 200px;
            z-index: 3000;
        }
        #pop {
              position: absolute;
              left: 425px;
              top: 90px;
              z-index: 3000;
        }
        #pop #pop-top {
            width: 100px;
            height: 80px;
            background : url("../../img/box.png");
            background-position: center center;
            background-size: cover;
        }
        #pop #pop-foot {
            width: 20px;
            height: 20px;
            background: url("../../img/point-mark.png");
            background-size: cover;
            margin-top: 16px;
            margin-left: 40px;
        }
    </style>
    <script type="text/javascript" src="../../js/common/jquery-1.11.3.min.js" ></script>
    <script type="text/javascript" src="../../supermap/libs/SuperMap.Include.js" ></script>
    <script type="text/javascript">
        var map;
        var url2 = "http://support.supermap.com.cn:8090/iserver/services/data-DynamicData/rest/data";
        $(function () {
          var url = "http://support.supermap.com.cn:8090" + "/iserver/services/map-world/rest/maps/World";
          function init() {
            map = new SuperMap.Map("map", {
              controls : [
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.MousePosition()
              ], allOverlays: true
            });
            var layerBase = new SuperMap.Layer.Tianditu();
            layer = new SuperMap.Layer.Tianditu();
            layer.isLabel = true;
            layer.layerType = "cva";
            var markers = new SuperMap.Layer.Markers("Markers");
            vector = new SuperMap.Layer.Vector("vector");
            map.addLayers([layerBase, markers, layer, vector]);
            map.setCenter(new SuperMap.LonLat(120.31267,32.86722), 13);
            test()
            /*var linePoint = [
              new SuperMap.Geometry.Point(120.30179,32.87497),
              new SuperMap.Geometry.Point(120.30389,32.86613),
              new SuperMap.Geometry.Point(120.32042,32.86896),
              new SuperMap.Geometry.Point(120.32600,32.86063)
            ];
            //在地图上绘制线段
            var lineString = new SuperMap.Geometry.LineString(linePoint);   
            console.log(lineString)
            var lineVector = new SuperMap.Feature.Vector(lineString);
            lineVector.style = {
              strokeColor : 'red',
              strokeWidth : 8
            };
            vector.addFeatures([lineVector]);
            
            var firstPoint = map.getPixelFromLonLat(new SuperMap.LonLat(120.30179,32.87497));  //经纬度转像素点
            var secondPoint = map.getPixelFromLonLat(new SuperMap.LonLat(120.30389,32.86613));
            var thirdPoint = map.getPixelFromLonLat(new SuperMap.LonLat(120.32042,32.86896));
            var lastPoint = map.getPixelFromLonLat(new SuperMap.LonLat(120.32600,32.86063));

            /*$("#car").animate({
              left : (firstPoint.x - 10) + 'px',
              top : (firstPoint.y - 10) + 'px',
            }, 4000, 'linear', function () {
                
            })
            $("#car").animate({
                left : (lastPoint.x - 10) + 'px',
                top : (lastPoint.y - 10) + 'px',
              }, 4000, 'linear', function () {

            })
            $("#pop").animate({
              left : (firstPoint.x - 48) + 'px',
              top : (firstPoint.y - 120) + 'px'
            }, 4000, 'linear', function () {
                
            })
            $("#pop").animate({
              left : (lastPoint.x - 48) + 'px',
              top : (lastPoint.y - 120) + 'px',
            }, 4000, 'linear', function () {

            });*/
          }


          function test() {
            var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
            getFeatureParam = new SuperMap.REST.FilterParameter({
              name: "Train@DynamicData",
              attributeFilter: "SmID < 2240"
            });
            getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
              queryParameter: getFeatureParam,
              datasetNames: ["DynamicData:Train"]
            });
            //返回个数
            getFeatureBySQLParams.toIndex = 40;//取用40个数据
            getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
              eventListeners: {
                "processCompleted": addPoint,
                "processFailed": processFailed
              }
            });
            getFeatureBySQLService.processAsync(getFeatureBySQLParams);
          }

          function addPoint(getFeaturesEventArgs) {
            let points = [] ;//获取数据PX
            let x , y ;
            var features = getFeaturesEventArgs.result.features;

            for (let i of features) {
              var po = i.geometry;
              points.push(new SuperMap.Geometry.Point(po.x,po.y));
              x = map.getPixelFromLonLat(new SuperMap.LonLat(po.x,po.y)).x;
              y = map.getPixelFromLonLat(new SuperMap.LonLat(po.x,po.y)).y;
              console.log(x+"-----"+y)
            }
            let lineString = new SuperMap.Geometry.LineString(points);
            console.log(lineString)
            var lineVector = new SuperMap.Feature.Vector(lineString);
            lineVector.style = {
              strokeColor : 'red',
              strokeWidth : 8
            };
            vector.addFeatures([lineVector]);
              
            /*$("#car").animate({
              left : (x - 10) + 'px',
              top : (y - 10) + 'px',
            }, 4000, 'linear', function () {
                
            });*/
            /*$("#pop").animate({
              left : (x - 48) + 'px',
              top : (y - 120) + 'px'
            }, 4000, 'linear', function () {
               
            })*/ 
          }
          function processFailed(e) {
            widgets.alert.showAlert(e.error.errorMsg, false);
          }
          init();
      })
    </script>
</head>
<body style="width: 1200px; height: 600px;">
<div id="map"></div>
<div id="car"></div>
<div id="pop">
    <div id="pop-top">开始</div>
    <div id="pop-foot"></div>
</div>
</body>
</html>